<template>
	<section>
		<!--工具条-->
		<!--列表-->
		<el-table :data="users" stripe highlight-current-row v-loading="listLoading" border @selection-change="selsChange" style="width: 100%;">
			<el-table-column prop="id" label="ID" min-width="30" align="center">
			</el-table-column>
			<el-table-column prop="vipName" label="会员名称" min-width="80" align="center">
            </el-table-column>
            <el-table-column prop="byPrice" label="会员价格" min-width="80" align="center">
            </el-table-column>
            <el-table-column prop="extendCount" label="升级该等级需要推广的人数" min-width="80" align="center">
            </el-table-column>
            <el-table-column prop="goodsOneLevelExtendScale" label="商品默认一级推广比例" min-width="80" align="center">
            </el-table-column>
            <el-table-column prop="goodsTwoLevelExtendScale" label="商品默认二级推广比例" min-width="80" align="center">
            </el-table-column>
            <el-table-column prop="extendCount" label="一级推广金额" min-width="80" align="center">
            </el-table-column>
            <el-table-column prop="twoLevelExtendAmount" label="二级推广金额" min-width="80" align="center">
            </el-table-column>
			<el-table-column label="操作" min-width="60" align="center">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--编辑界面-->
		<el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false" width="800px">
			<el-form :model="editForm" label-width="180px" ref="editForm">
				<!--<el-form-item label="会员名称" prop="vipName">
					<el-input  v-model="editForm.vipName" auto-complete="off"></el-input>
				</el-form-item>-->
				<el-form-item label="会员价格" prop="byPrice">
					<el-input  v-model="editForm.byPrice" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="升级该等级需要推广的人数" prop="extendCount">
					<el-input  v-model="editForm.extendCount" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="商品默认一级推广比例" prop="goodsOneLevelExtendScale">
					<el-input  v-model="editForm.goodsOneLevelExtendScale" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="商品默认二级推广比例" prop="goodsTwoLevelExtendScale" v-if="editForm.vipType != 1">
					<el-input  v-model="editForm.goodsTwoLevelExtendScale" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="一级推广金额" prop="extendCount">
					<el-input  v-model="editForm.extendCount" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="二级推广金额" prop="twoLevelExtendAmount" v-if="editForm.vipType != 1">
					<el-input  v-model="editForm.twoLevelExtendAmount" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button size="mini" @click.native="editFormVisible = false">取消</el-button>
				<el-button size="mini" type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	import util from '../../common/js/util'
	import { client } from '../../common/js/alioss'
	export default {
		data() {
			return {
				filters:{
					name:'',
				},
				sels:[],
				users: [],
				total: 0,
				page: 1,
				pageSize: 10,
				listLoading: false,
				editFormVisible: false,
				editLoading: false,
				editForm: {
					id: '',
					byPrice: '',
					extendCount:'',
					goodsOneLevelExtendScale:'',
					goodsTwoLevelExtendScale:'',
					oneLevelExtendAmount:'',
					twoLevelExtendAmount:'',
					vipType:''
				},
			}
		},
		methods: {
			
			handleCurrentChange(val) {
				this.page = val;
				this.getUsers();
			},
			selsChange: function (sels) {
				this.sels = sels;
			},
			//获取列表
			getUsers:function (){
				this.listLoading = true;
				let para = {
				    page: this.page,
				    size: this.pageSize,
				};
				var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},
				});  
				instance.post('admin/platform/manage/getVipConfigList', this.qs.stringify(para)).then(data => {
					let  res = data.data;
					console.log(data);
					if (res.code !== 0) {
						this.$message({
							message: res.msg,
							type: 'error'
						});
					} else {
						console.log(res)
						this.total = res.total;
						this.users = res.rows;
						this.data = res.data;
						this.listLoading = false;
					}
				}); 
			},
			//显示编辑界面
			handleEdit: function (index, row) {
				
				this.editFormVisible = true;
				this.editForm.id = row.id;
				this.editForm.vipType = row.vipType;
				this.editForm.byPrice = row.byPrice;
				this.editForm.extendCount = row.extendCount;
				this.editForm.goodsOneLevelExtendScale = row.goodsOneLevelExtendScale;
				this.editForm.goodsTwoLevelExtendScale = row.goodsTwoLevelExtendScale;
				this.editForm.oneLevelExtendAmount = row.oneLevelExtendAmount;
				this.editForm.twoLevelExtendAmount = row.twoLevelExtendAmount;
			},
			//编辑
			editSubmit: function () {
				this.$refs.editForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editLoading = true;
							let para = {
								id:this.editForm.id,
								byPrice:this.editForm.byPrice,
								extendCount:this.editForm.extendCount,
								goodsOneLevelExtendScale:this.editForm.goodsOneLevelExtendScale,
								goodsTwoLevelExtendScale:this.editForm.goodsTwoLevelExtendScale,
								oneLevelExtendAmount:this.editForm.oneLevelExtendAmount,
								twoLevelExtendAmount:this.editForm.twoLevelExtendAmount,
							}
							var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},
							});  
							instance.post('admin/platform/manage/updateVipConfig', this.qs.stringify(para)).then(data => {
								
								let  res = data.data;
								if (res.code !== 0) {
									this.$message({
										message: res.msg,
										type: 'error'
									});
								} else {
									this.editLoading = false;
									this.$message({
										message: '提交成功',
										type: 'success'
									});
									this.$refs['editForm'].resetFields();
									this.editFormVisible = false;
									this.getUsers();
								}
							});
						});
					}
				});
			},
		},
		mounted() {
			this.getUsers();
		}
	}

</script>

<style scoped>

</style>